<template>
  <div class="mgt20">
    <swiper ref="mySwiper" :options="swiperOption">
      <!-- slides -->
      <swiper-slide v-for="(item,index) in contractQueryType" :key="index" class="stop-swiping" :class="{active: index === isActive}" @click.native="contractQueryFn(index)">{{ item.contractTitle }}</swiper-slide>
      <!-- Optional controls -->
      <div slot="button-prev" class="swiper-button-prev" @click="slidePrevFn" />
      <div slot="button-next" class="swiper-button-next" @click="slideNextFn" />
    </swiper>
    <!--tabs-->
    <div class="tabsWrap" :data="tabsModule">
      <el-tabs v-model="activeName" @tab-click="chequeHandleClick">
        <el-tab-pane v-for="(item,index) in tabsModule.resList" :key="index" :label="item.title" :name="item.page">
          <currencyData :currency-data="signingData" :option="signingOption" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import Axios from 'axios'
import currencyData from '@/components/common/currencyData'
// import ChildDropDown from '@/components/common/DropDownLoad'
import { queryLoss } from '@/api/bankBiz/loss/loss'

export default {
  name: 'Cheque',
  components: {
    currencyData
  },
  data() {
    return {
      checkListIsShow: false,
      contractQueryType: [],
      isActive: 0,
      activeName: 'first', // tab页签切换
      tabsModule: {},
      query: {
        namespace: 'Personal',
        key: '',
        query: {}
      },
      swiperOption: {
        observer: true, // 修改swiper自己或者子元素时，初始化
        slidesPerView: 6,
        slidesPerGroup: 5,
        allowSlidePrev: true,
        allowSlideNext: true,
        noSwiping: true,
        noSwipingClass: 'stop-swiping',
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          disabledClass: 'my-button-disabled'
        },
        on: {
          init: function() {
            // 初始化事件
            this.emit('transitionEnd')
          }
        }
      },
      signingOption: {},
      signingData: {},
      manageMoneyOption: {
        column: [
          {
            'prop': 'signingRelationship',
            'label': '签约关系',
            'span': 8
          },
          {
            'prop': 'signedMasterAccount',
            'label': '签约主账号',
            'span': 8
          },
          {
            'prop': 'riskLevel',
            'label': '风险等级',
            'span': 8
          },
          {
            'prop': 'maturityOfRiskLevel',
            'label': '风险等级到期时间',
            'span': 8
          }
        ]
      },
      manageMoneyData: {
        'signingRelationship': '签约关系',
        'signedMasterAccount': '签约主账号',
        'riskLevel': '风险等级',
        'maturityOfRiskLevel': '风险等级到期时间'
      },
      manageMoneyChangeOption: {
        column: [
          {
            'prop': 'changeTime',
            'label': '变更时间',
            'span': 8
          },
          {
            'prop': 'changeChannel',
            'label': '变更渠道',
            'span': 8
          },
          {
            'prop': 'changeOfOutlets',
            'label': '变更网点',
            'span': 8
          }
        ]
      },
      manageMoneyChangeData: {
        'changeTime': '变更时间',
        'changeChannel': '变更渠道',
        'changeOfOutlets': '变更网点'
      },
      manageMoneyMaintenanceOption: {
        column: [
          {
            'prop': 'userName',
            'label': '用户姓名',
            'span': 8
          },
          {
            'prop': 'sex',
            'label': '性别',
            'span': 8
          },
          {
            'prop': 'nationality',
            'label': '国籍',
            'span': 8
          },
          {
            'prop': 'documentType',
            'label': '证件类型',
            'span': 8
          },
          {
            'prop': 'documentNumber',
            'label': '证件号码',
            'span': 8
          },
          {
            'prop': 'validityOfCertificate',
            'label': '证件有效期',
            'span': 8
          },
          {
            'prop': 'reservedMobileNumber',
            'label': '预留手机号',
            'span': 8
          },
          {
            'prop': 'industry',
            'label': '行业',
            'span': 8
          },
          {
            'prop': 'occupation',
            'label': '职业',
            'span': 8
          },
          {
            'prop': 'permanentAddress',
            'label': '常住地址',
            'span': 8
          }
        ]
      },
      manageMoneyMaintenanceData: {
        'userName': '用户姓名',
        'sex': '性别',
        'nationality': '国籍',
        'documentType': '证件类型',
        'documentNumber': '证件号码',
        'validityOfCertificate': '证件有效期',
        'reservedMobileNumber': '预留手机号',
        'industry': '行业',
        'occupation': '职业',
        'permanentAddress': '常住地址'
      },
      fundOption: {
        column: [
          {
            'prop': 'signingRelationship',
            'label': '签约关系',
            'span': 8
          },
          {
            'prop': 'signedMasterAccount',
            'label': '签约主账号',
            'span': 8
          },
          {
            'prop': 'riskLevel',
            'label': '风险等级',
            'span': 8
          },
          {
            'prop': 'maturityOfRiskLevel',
            'label': '风险等级到期时间',
            'span': 8
          }
        ]
      },
      fundData: {
        'signingRelationship': '签约关系',
        'signedMasterAccount': '签约主账号',
        'riskLevel': '风险等级',
        'maturityOfRiskLevel': '风险等级到期时间'
      },
      fundChangeOption: {
        column: [
          {
            'prop': 'changeTime',
            'label': '变更时间',
            'span': 8
          },
          {
            'prop': 'changeChannel',
            'label': '变更渠道',
            'span': 8
          },
          {
            'prop': 'changeOfOutlets',
            'label': '变更网点',
            'span': 8
          }
        ]
      },
      fundChangeData: {
        'changeTime': '变更时间',
        'changeChannel': '变更渠道',
        'changeOfOutlets': '变更网点'
      },
      fundMaintenanceOption: {
        column: [
          {
            'prop': 'userName',
            'label': '用户姓名',
            'span': 8
          },
          {
            'prop': 'sex',
            'label': '性别',
            'span': 8
          },
          {
            'prop': 'nationality',
            'label': '国籍',
            'span': 8
          },
          {
            'prop': 'documentType',
            'label': '证件类型',
            'span': 8
          },
          {
            'prop': 'documentNumber',
            'label': '证件号码',
            'span': 8
          },
          {
            'prop': 'validityOfCertificate',
            'label': '证件有效期',
            'span': 8
          },
          {
            'prop': 'reservedMobileNumber',
            'label': '预留手机号',
            'span': 8
          },
          {
            'prop': 'industry',
            'label': '行业',
            'span': 8
          },
          {
            'prop': 'occupation',
            'label': '职业',
            'span': 8
          },
          {
            'prop': 'permanentAddress',
            'label': '常住地址',
            'span': 8
          }
        ]
      },
      fundMaintenanceData: {
        'userName': '用户姓名',
        'sex': '性别',
        'nationality': '国籍',
        'documentType': '证件类型',
        'documentNumber': '证件号码',
        'validityOfCertificate': '证件有效期',
        'reservedMobileNumber': '预留手机号',
        'industry': '行业',
        'occupation': '职业',
        'permanentAddress': '常住地址'
      },
      mobilePhoneSigningOption: {
        column: [
          {
            'prop': 'signingTime',
            'label': '签约时间',
            'span': 8
          },
          {
            'prop': 'signingChannels',
            'label': '签约渠道',
            'span': 8
          },
          {
            'prop': 'signingMasterAccount',
            'label': '签约主账户',
            'span': 8
          },
          {
            'prop': 'otherAccounts',
            'label': '其他账户',
            'span': 8
          },
          {
            'prop': 'singleLimit',
            'label': '单笔限额',
            'span': 8
          },
          {
            'prop': 'oneDayLimit',
            'label': '单日限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulativeLimit',
            'label': '年累计限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulatedTransactions',
            'label': '年累计交易笔数',
            'span': 8
          }
        ]
      },
      mobilePhoneSigningData: {
        'signingTime': '签约时间',
        'signingChannels': '签约渠道',
        'signingMasterAccount': '签约主账户',
        'otherAccounts': '其他账户',
        'singleLimit': '单笔限额',
        'oneDayLimit': '单日限额',
        'annualAccumulativeLimit': '年累计限额',
        'annualAccumulatedTransactions': '年累计交易笔数'
      },
      mobilePhoneSigningChangeOption: {
        column: [
          {
            'prop': 'changeTime',
            'label': '变更时间',
            'span': 8
          },
          {
            'prop': 'changeChannel',
            'label': '变更渠道',
            'span': 8
          },
          {
            'prop': 'changeOfOutlets',
            'label': '变更网点',
            'span': 8
          }
        ]
      },
      mobilePhoneSigningChangeData: {
        'changeTime': '变更时间',
        'changeChannel': '变更渠道',
        'changeOfOutlets': '变更网点'
      },
      netSigningOption: {
        column: [
          {
            'prop': 'signingTime',
            'label': '签约时间',
            'span': 8
          },
          {
            'prop': 'signingChannels',
            'label': '签约渠道',
            'span': 8
          },
          {
            'prop': 'signingMasterAccount',
            'label': '签约主账户',
            'span': 8
          },
          {
            'prop': 'otherAccounts',
            'label': '其他账户',
            'span': 8
          },
          {
            'prop': 'singleLimit',
            'label': '单笔限额',
            'span': 8
          },
          {
            'prop': 'oneDayLimit',
            'label': '单日限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulativeLimit',
            'label': '年累计限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulatedTransactions',
            'label': '年累计交易笔数',
            'span': 8
          }
        ]
      },
      netSigningData: {
        'signingTime': '签约时间',
        'signingChannels': '签约渠道',
        'signingMasterAccount': '签约主账户',
        'otherAccounts': '其他账户',
        'singleLimit': '单笔限额',
        'oneDayLimit': '单日限额',
        'annualAccumulativeLimit': '年累计限额',
        'annualAccumulatedTransactions': '年累计交易笔数'
      },
      netSigningChangeOption: {
        column: [
          {
            'prop': 'changeTime',
            'label': '变更时间',
            'span': 8
          },
          {
            'prop': 'changeChannel',
            'label': '变更渠道',
            'span': 8
          },
          {
            'prop': 'changeOfOutlets',
            'label': '变更网点',
            'span': 8
          }
        ]
      },
      netSigningChangeData: {
        'changeTime': '变更时间',
        'changeChannel': '变更渠道',
        'changeOfOutlets': '变更网点'
      },
      atmSigningOption: {
        column: [
          {
            'prop': 'signingTime',
            'label': '签约时间',
            'span': 8
          },
          {
            'prop': 'signingChannels',
            'label': '签约渠道',
            'span': 8
          },
          {
            'prop': 'signingMasterAccount',
            'label': '签约主账户',
            'span': 8
          },
          {
            'prop': 'singleLimit',
            'label': '单笔限额',
            'span': 8
          },
          {
            'prop': 'oneDayLimit',
            'label': '单日限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulativeLimit',
            'label': '年累计限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulatedTransactions',
            'label': '年累计交易笔数',
            'span': 8
          }
        ]
      },
      atmSigningData: {
        'signingTime': '签约时间',
        'signingChannels': '签约渠道',
        'signingMasterAccount': '签约主账户',
        'singleLimit': '单笔限额',
        'oneDayLimit': '单日限额',
        'annualAccumulativeLimit': '年累计限额',
        'annualAccumulatedTransactions': '年累计交易笔数'
      },
      atmSigningChangeOption: {
        column: [
          {
            'prop': 'changeTime',
            'label': '变更时间',
            'span': 8
          },
          {
            'prop': 'changeChannel',
            'label': '变更渠道',
            'span': 8
          },
          {
            'prop': 'changeOfOutlets',
            'label': '变更网点',
            'span': 8
          }
        ]
      },
      atmSigningChangeData: {
        'changeTime': '变更时间',
        'changeChannel': '变更渠道',
        'changeOfOutlets': '变更网点'
      },
      msgSigningOption: {
        column: [
          {
            'prop': 'signingTime',
            'label': '签约时间',
            'span': 8
          },
          {
            'prop': 'signingChannels',
            'label': '签约渠道',
            'span': 8
          },
          {
            'prop': 'signingMasterAccount',
            'label': '签约主账户',
            'span': 8
          },
          {
            'prop': 'singleLimit',
            'label': '单笔限额',
            'span': 8
          },
          {
            'prop': 'oneDayLimit',
            'label': '单日限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulativeLimit',
            'label': '年累计限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulatedTransactions',
            'label': '年累计交易笔数',
            'span': 8
          }
        ]
      },
      msgSigningData: {
        'signingTime': '签约时间',
        'signingChannels': '签约渠道',
        'signingMasterAccount': '签约主账户',
        'singleLimit': '单笔限额',
        'oneDayLimit': '单日限额',
        'annualAccumulativeLimit': '年累计限额',
        'annualAccumulatedTransactions': '年累计交易笔数'
      },
      msgSigningChangeOption: {
        column: [
          {
            'prop': 'changeTime',
            'label': '变更时间',
            'span': 8
          },
          {
            'prop': 'changeChannel',
            'label': '变更渠道',
            'span': 8
          },
          {
            'prop': 'changeOfOutlets',
            'label': '变更网点',
            'span': 8
          }
        ]
      },
      msgSigningChangeData: {
        'changeTime': '变更时间',
        'changeChannel': '变更渠道',
        'changeOfOutlets': '变更网点'
      },
      telSigningOption: {
        column: [
          {
            'prop': 'signingTime',
            'label': '签约时间',
            'span': 8
          },
          {
            'prop': 'signingChannels',
            'label': '签约渠道',
            'span': 8
          },
          {
            'prop': 'signingMasterAccount',
            'label': '签约主账户',
            'span': 8
          },
          {
            'prop': 'singleLimit',
            'label': '单笔限额',
            'span': 8
          },
          {
            'prop': 'oneDayLimit',
            'label': '单日限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulativeLimit',
            'label': '年累计限额',
            'span': 8
          },
          {
            'prop': 'annualAccumulatedTransactions',
            'label': '年累计交易笔数',
            'span': 8
          }
        ]
      },
      telSigningData: {
        'signingTime': '签约时间',
        'signingChannels': '签约渠道',
        'signingMasterAccount': '签约主账户',
        'singleLimit': '单笔限额',
        'oneDayLimit': '单日限额',
        'annualAccumulativeLimit': '年累计限额',
        'annualAccumulatedTransactions': '年累计交易笔数'
      },
      telSigningChangeOption: {
        column: [
          {
            'prop': 'changeTime',
            'label': '变更时间',
            'span': 8
          },
          {
            'prop': 'changeChannel',
            'label': '变更渠道',
            'span': 8
          },
          {
            'prop': 'changeOfOutlets',
            'label': '变更网点',
            'span': 8
          }
        ]
      },
      telSigningChangeData: {
        'changeTime': '变更时间',
        'changeChannel': '变更渠道',
        'changeOfOutlets': '变更网点'
      },
      waterSalaryOption: {
        column: [
          {
            'prop': 'signingTime',
            'label': '签约时间',
            'span': 8
          },
          {
            'prop': 'signingChannels',
            'label': '签约渠道',
            'span': 8
          },
          {
            'prop': 'signingMasterAccount',
            'label': '签约主账户',
            'span': 8
          },
          {
            'prop': 'deductionTime',
            'label': '扣费时间',
            'span': 8
          },
          {
            'prop': 'firstDeductionMonth',
            'label': '首次扣费月份',
            'span': 8
          },
          {
            'prop': 'signingCompany',
            'label': '签约公司',
            'span': 8
          }
        ]
      },
      waterSalaryData: {
        'signingTime': '签约时间',
        'signingChannels': '签约渠道',
        'signingMasterAccount': '签约主账户',
        'deductionTime': '扣费时间',
        'firstDeductionMonth': '首次扣费月份',
        'signingCompany': '签约公司'
      },
      eleSalaryOption: {
        column: [
          {
            'prop': 'signingTime',
            'label': '签约时间',
            'span': 8
          },
          {
            'prop': 'signingChannels',
            'label': '签约渠道',
            'span': 8
          },
          {
            'prop': 'signingMasterAccount',
            'label': '签约主账户',
            'span': 8
          },
          {
            'prop': 'deductionTime',
            'label': '扣费时间',
            'span': 8
          },
          {
            'prop': 'firstDeductionMonth',
            'label': '首次扣费月份',
            'span': 8
          },
          {
            'prop': 'signingCompany',
            'label': '签约公司',
            'span': 8
          }
        ]
      },
      eleSalaryData: {
        'signingTime': '签约时间',
        'signingChannels': '签约渠道',
        'signingMasterAccount': '签约主账户',
        'deductionTime': '扣费时间',
        'firstDeductionMonth': '首次扣费月份',
        'signingCompany': '签约公司'
      },
      gasSalaryOption: {
        column: [
          {
            'prop': 'signingTime',
            'label': '签约时间',
            'span': 8
          },
          {
            'prop': 'signingChannels',
            'label': '签约渠道',
            'span': 8
          },
          {
            'prop': 'signingMasterAccount',
            'label': '签约主账户',
            'span': 8
          },
          {
            'prop': 'deductionTime',
            'label': '扣费时间',
            'span': 8
          },
          {
            'prop': 'firstDeductionMonth',
            'label': '首次扣费月份',
            'span': 8
          },
          {
            'prop': 'signingCompany',
            'label': '签约公司',
            'span': 8
          }
        ]
      },
      gasSalaryData: {
        'signingTime': '签约时间',
        'signingChannels': '签约渠道',
        'signingMasterAccount': '签约主账户',
        'deductionTime': '扣费时间',
        'firstDeductionMonth': '首次扣费月份',
        'signingCompany': '签约公司'
      },
      webSalaryOption: {
        column: [
          {
            'prop': 'signingTime',
            'label': '签约时间',
            'span': 8
          },
          {
            'prop': 'signingChannels',
            'label': '签约渠道',
            'span': 8
          },
          {
            'prop': 'signingMasterAccount',
            'label': '签约主账户',
            'span': 8
          },
          {
            'prop': 'deductionTime',
            'label': '扣费时间',
            'span': 8
          },
          {
            'prop': 'firstDeductionMonth',
            'label': '首次扣费月份',
            'span': 8
          },
          {
            'prop': 'signingCompany',
            'label': '签约公司',
            'span': 8
          }
        ]
      },
      webSalaryData: {
        'signingTime': '签约时间',
        'signingChannels': '签约渠道',
        'signingMasterAccount': '签约主账户',
        'deductionTime': '扣费时间',
        'firstDeductionMonth': '首次扣费月份',
        'signingCompany': '签约公司'
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  created() {
    this.initFn()
  },
  mounted() {
    console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false)
  },
  methods: {
    initFn() {
      // 渲染滑动模块标题
      Axios.post('/api/personalData').then((res) => {
        this.contractQueryType = res.data.contractQueryType
      }).catch((err) => {
        console.log(err)
      })
      Axios.post('/api/personalData').then((res) => {
        // 加载 页签标题
        this.tabsModule = res.data.tabsData[0]
        // 初始化 数据
        this.signingOption = this.manageMoneyOption
      }).catch((err) => {
        console.log(err)
      })
      // 调接口
      this.query.key = 'manageMoneySigningQuery'
      queryLoss(this.query).then((res) => {
        this.signingData = res.data.data
      })
    },
    chequeHandleClick(tab, event) {
      console.log('打印' + tab.index + '----' + event)
      if (this.isActive === 0) {
        if (tab.index === '0') {
          this.signingOption = this.manageMoneyOption
          this.query.key = 'manageMoneySigningQuery'
        } else if (tab.index === '1') {
          this.signingOption = this.manageMoneyChangeOption
          this.query.key = 'manageMoneySigningChangeQuery'
        } else if (tab.index === '2') {
          this.signingOption = this.manageMoneyMaintenanceOption
          this.query.key = 'manageMoneyMaintenanceQuery'
        }
      } else if (this.isActive === 1) {
        if (tab.index === '0') {
          this.signingOption = this.fundOption
          this.query.key = 'fundSigningQuery'
        } else if (tab.index === '1') {
          this.signingOption = this.fundChangeOption
          this.query.key = 'fundSigningChangeQuery'
        } else if (tab.index === '2') {
          this.signingOption = this.fundMaintenanceOption
          this.query.key = 'fundMaintenanceQuery'
        }
      } else if (this.isActive === 2) {
        if (tab.index === '0') {
          this.signingOption = this.mobilePhoneSigningOption
          this.query.key = 'mobilePhoneSigningQuery'
        } else if (tab.index === '1') {
          this.signingOption = this.mobilePhoneSigningChangeOption
          this.query.key = 'mobilePhoneSigningChangeQuery'
        }
      } else if (this.isActive === 3) {
        if (tab.index === '0') {
          this.signingOption = this.netSigningOption
          this.query.key = 'netSigningQuery'
        } else if (tab.index === '1') {
          this.signingOption = this.netSigningChangeOption
          this.query.key = 'netSigningChangeQuery'
        }
      } else if (this.isActive === 4) {
        if (tab.index === '0') {
          this.signingOption = this.atmSigningOption
          this.query.key = 'atmSigningQuery'
        } else if (tab.index === '1') {
          this.signingOption = this.atmSigningChangeOption
          this.query.key = 'atmSigningChangeQuery'
        }
      } else if (this.isActive === 5) {
        if (tab.index === '0') {
          this.signingOption = this.msgSigningOption
          this.query.key = 'msgSigningQuery'
        } else if (tab.index === '1') {
          this.signingOption = this.msgSigningChangeOption
          this.query.key = 'msgSigningChangeQuery'
        }
      } else if (this.isActive === 6) {
        if (tab.index === '0') {
          this.signingOption = this.telSigningOption
          this.query.key = 'telSigningQuery'
        } else if (tab.index === '1') {
          this.signingOption = this.telSigningChangeOption
          this.query.key = 'telSigningChangeQuery'
        }
      } else if (this.isActive === 7) {
        this.signingOption = this.waterSalaryOption
        this.query.key = 'waterSalary'
      } else if (this.isActive === 8) {
        this.signingOption = this.eleSalaryOption
        this.query.key = 'eleSalary'
      } else if (this.isActive === 9) {
        this.signingOption = this.gasSalaryOption
        this.query.key = 'gasSalary'
      } else if (this.isActive === 10) {
        this.signingOption = this.webSalaryOption
        this.query.key = 'webSalary'
      }
      // 统一接口
      queryLoss(this.query).then((res) => {
        this.signingData = res.data.data
      })
    },
    contractQueryFn(index) {
      this.isActive = index
      this.activeName = 'first'
      Axios.post('/api/personalData').then((res) => {
        this.tabsModule = res.data.tabsData[index]
        if (index === 0) {
          this.signingOption = this.manageMoneyOption
          // 调接口
          this.query.key = 'manageMoneySigningQuery'
        } else if (index === 1) {
          this.signingOption = this.fundOption
          this.query.key = 'fundSigningQuery'
        } else if (index === 2) {
          this.signingOption = this.mobilePhoneSigningOption
          this.query.key = 'mobilePhoneSigningQuery'
        } else if (index === 3) {
          this.signingOption = this.netSigningOption
          this.query.key = 'netSigningQuery'
        } else if (index === 4) {
          this.signingOption = this.atmSigningOption
          this.query.key = 'atmSigningQuery'
        } else if (index === 5) {
          this.signingOption = this.msgSigningOption
          this.query.key = 'msgSigningQuery'
        } else if (index === 6) {
          this.signingOption = this.telSigningOption
          this.query.key = 'telSigningQuery'
        } else if (index === 7) {
          this.signingOption = this.waterSalaryOption
          this.query.key = 'waterSalary'
        } else if (index === 8) {
          this.signingOption = this.eleSalaryOption
          this.query.key = 'eleSalary'
        } else if (index === 9) {
          this.signingOption = this.gasSalaryOption
          this.query.key = 'gasSalary'
        } else if (index === 10) {
          this.signingOption = this.webSalaryOption
          this.query.key = 'webSalary'
        }
        // 统一接口
        queryLoss(this.query).then((res) => {
          this.signingData = res.data.data
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    slidePrevFn() {
      this.swiper.slidePrev()
    },
    slideNextFn() {
      this.swiper.slideNext()
    }
  }
}
</script>
<style scoped>
  .el-breadcrumb {
    padding: 10px 0 !important;
  }
  .active {
    color: #4786C3;
    border-bottom:2px #4786C3 solid;
  }
  .swiper-slide{
    height:40px;
    line-height: 40px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
  }
  .mgtb10{
    margin: 10px 0;
  }
  .pdlr10{
    padding: 0 10px;
  }
  .swiper-button-prev{width:14px;height:22px;margin-top:-11px;left:0 !important;background-size:14px 22px;}
  .swiper-button-next{width:14px;height:22px;margin-top:-11px;right:0 !important;background-size:14px 22px;}
  /*.swiper-slide-active{*/
    /*color: #4786C3;*/
    /*border-bottom: 1px #4786C3 solid;*/
  /*}*/
  .my-button-disabled{
    opacity:0.2;
  }
  .mgt20{
    margin-top: 20px;
  }
</style>
